<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="门店" prop="deptId">
                <el-select v-model="queryParams.deptId" placeholder="请选择门店">
                <el-option 
                    v-for="item in slectDeptOptions"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId">
                </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班次" prop="classes">
                <el-select v-model="queryParams.classes" placeholder="请选择班次" clearable>
                <el-option
                    v-for="dict in dict.type.class"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="营业日期" prop="checkTime">
                <el-date-picker clearable
                v-model="queryParams.checkTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择营业日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-table v-loading="loading" :data="dayReportList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="门店" align="center" prop="deptName" />
                <el-table-column label="班次" align="center" prop="classes">
                    <template slot-scope="scope">
                    <dict-tag :options="dict.type.class" :value="scope.row.classes"/>
                    </template>
                </el-table-column>
                <el-table-column label="收入" align="center" prop="checkUserName" />
                <el-table-column label="销售" align="center" prop="checkUserName" />
                <el-table-column label="即开票销售" align="center" prop="checkUserName" />
                <el-table-column label="盘点日期" align="center" prop="checkTime" width="180">
                    <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleShow(scope.row)"
                    >查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog :title="title" :visible.sync="open" width="950px" append-to-body>
        </el-dialog>
    </div>
</template>

<script>
import { listDay } from "@/api/system/report";
import { listDept } from "@/api/system/dept";
    export default {
        name: "ReportDay",
        dicts: ['class'],
        data() {
            return {
                // 遮罩层
                loading: true,
                queryParams: {},
                slectDeptOptions:[],
                // 显示搜索条件
                showSearch: true,
                dayReportList: [
                    {"deptName": "百合广场店","classes": "Morning"}
                ],
                title: "门店日报表明细"
            }
        },created() {
            this.getList();
        },methods: {
            getList(){
                this.loading = true;
                listDept({"parentId":100}).then(response => {
                    this.slectDeptOptions = response.data;
                });
                this.loading = false;
            },
            handleQuery(){

            },handleSelectionChange(){

            },handleShow(){

            }

        }
    }
</script>

<style lang="scss" scoped></style>